<template>
	<div class="page-login">
		<div class="login-header">
			<a class="logo" href="http://www.meituan.com"></a>
		</div>

		<div class="Admain"  :style="{margin:`100px,0,100px,0`,backgroundImage:`url(${img})`}">
		<div class="w3ls-headding">
			<span><h1>登录是一种<span>态度</span></h1></span>
		</div>
		<div class="agile-main">
			<div class="agile-left" :style="{backgroundImage:`url(${imgii})` }">

			</div>

			<div class="agile-right">
			<div class="form">
				<h4 v-if="error" class="tips">{{error}}</h4>


				<div class="agile-right-h2">
					<h2> register here</h2>
				</div>
				<div class="w3l-name">
<!--					<span><i class="fa fa-user el-icon-user-solid" aria-hidden="true"></i></span>-->
					<el-input :class="{error: error && !userName}"  name="Username" v-model="userName" placeholder="手机号/用户名/邮箱" prefix-icon="el-icon-user"></el-input>
				</div>
				<div class="clear"></div>
				<div class="w3l-psw">
<!--					//<span><i class="fa fa-lock el-icon-lock" aria-hidden="true" ></i></span>-->
					<el-input :class="{error: error && !password}" v-model="password" type="password" name="Password" placeholder="密码"  prefix-icon="el-icon-lock"></el-input>
				</div>







				<div class="clear"></div>

				<div class="clear"></div>

				<div class="w3l-submit">
					<el-button class="Sdas" type="primary" style="width:100%;"  @click="submit" >登录</el-button>
				</div>


				<div class="wthree-social">
					<router-link tag="a" to="/Zhuce" style="width:100%;"><i class="fa fa-facebook" aria-hidden="true"></i> 前往注册>>> </router-link>
				</div>
			</div>
		</div>
		</div>
		</div>
	</div>
</template>
<script>
	import api from '@/api/index.js'
	//import {setLocalStorage} from "../utils/localStorage";

	export default {
		data() {
			return {
				img:require('../assets/images/bg.jpg'),
				imgii:require('../assets/images/left1.jpg'),
				userName: '',
				password: '',
				error: '',
			}
		},
		methods: {
			submit() {
				console.log(this.userName, this.password);
				if (!this.userName) {
					this.error = '请输入账号';
					return false;
				}
				if (!this.password) {
					this.error = '请输入密码';
					return false;
				}
				api.login({
					params: {
						userName: this.userName,
						password: this.password
					}
				}).then((res) => {
					console.log(res);
					if (res.data.status == 'success') {

						document.cookie = `login=true;`
						this.$router.push({ path: '/Home'});
						this.$store.commit('setUserName', this.userName);
						console.log(this.$store.state.store.userName)
						//setLocalStorage('useree',this.userName)
						this.$router.go(0);
					} else {
						this.error = res.data.msg;
					}
				})
			}
		}
	}
</script>

<style  lang="scss" scoped>


	div form div input{
		margin-left: 5px;
	}
	div form div el-input{
		margin-left: 5px;
	}
	.Admain{
		margin-top: -45px;
		height: 1030px;
	}
	.w3ls-headding{

	}
	.w3ls-headding span {

		color: #f5bb06;
	}
	.w3ls-headding h1 {

		padding-top: 50px;
		font-size: 50px;
		font-weight: 500;
		text-align: center;
		text-transform: capitalize;
		letter-spacing: 2px;
		color: #fff;
		margin: 45px 0px;
		font-family: 'Exo 2', sans-serif;
	}
	.agile-left {
		flex: 1;
		background: no-repeat;
		background-size: cover;
		background-position: 50% 50%;
	}
	.agile-main {
		width: 60%;
		max-width: 860px;
		margin: auto;
		display: flex;
	}
	.agile-right {
		flex: 1;
		padding: 2em;
		background: rgba(15, 16, 15, 0.89);
	}
	.agile-right-h2 h2 {
		font-size: 25px;
		font-weight: 500;
		text-align: center;
		text-transform: capitalize;
		color: #fff;
		letter-spacing: 1px;
		font-family: 'Exo 2', sans-serif;
	}
	.w3l-name, .w3l-email, .w3l-psw, .w3l-cpsw {
		font-size: 15px;
		font-weight: 500;
		text-align: left;
		text-transform: capitalize;
		width: 100%;
		margin: 15px 0px;
		padding: 10px 0px 10px 10px;
		letter-spacing: 1px;
		box-sizing: border-box;
		border: none;
		outline: none;
		background: #fff;
		color: #1b1a1a;
		font-family: 'PT Sans', sans-serif;
	}
	.w3l-name, .w3l-email, .w3l-psw, .w3l-cpsw {
		font-size: 15px;
		font-weight: 500;
		text-align: left;
		text-transform: capitalize;
		width: 100%;
		margin: 15px 0px;
		padding: 10px 0px 10px 10px;
		letter-spacing: 1px;
		box-sizing: border-box;
		border: none;
		outline: none;
		background: #fff;
		color: #1b1a1a;
		font-family: 'PT Sans', sans-serif;
	}
	.agile-right span .fa {
		font-size: 15px;
		width: 7%;
		text-align: center;
		border-right: 1px solid #000;
		color: #d82a87;
	}
	.fa {
		display: inline-block;
		font: normal normal normal 14px/1 FontAwesome;
		font-size: inherit;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.w3l-name input[type="text"], .w3l-email input[type="email"], .w3l-psw input[type="password"], .w3l-cpsw input[type="password"] {
		letter-spacing: 2px;
		border: none;
		outline: none;
		width: 90%;
		font-family: 'PT Sans', sans-serif;
	}
	.w3l-name, .w3l-email, .w3l-psw, .w3l-cpsw {
		font-size: 15px;
		font-weight: 500;
		text-align: left;
		text-transform: capitalize;
		width: 100%;
		margin: 15px 0px;
		padding: 10px 0px 10px 10px;
		letter-spacing: 1px;
		box-sizing: border-box;
		border: none;
		outline: none;
		background: #fff;
		color: #1b1a1a;
		font-family: 'PT Sans', sans-serif;
	}
	.w3l-agree {
		text-align: center;
	}
	.Sdas {
		font-size: 15px;
		font-weight: 500;
		text-transform: capitalize;
		padding: 8px;
		width: 60% !important;
		margin: 8px auto;
		letter-spacing: 2px;
		border: 1px solid #fff;
		border-radius: 2em;
		background: transparent;
		color: #fff;
		outline: none;
		cursor: pointer;
		display: block;
		font-family: 'PT Sans', sans-serif;
		-webkit-transition: 0.5s all;
		-moz-transition: 0.5s all;
		-o-transition: 0.5s all;
		-ms-transition: 0.5s all;
		transition: 0.5s all;
	}
	.wthree-p {
		font-size: 15px;
		font-weight: 500;
		text-align: center;
		text-transform: capitalize;
		letter-spacing: 2px;
		position: relative;
		color: #fff;
		font-family: 'PT Sans', sans-serif;
	}
	.wthree-p:before {
		position: absolute;
		content: '';
		width: 65px;
		height: 2px;
		background: #d82a87;
		top: 49%;
		left: 10%;
	}
	.wthree-p:after {
		position: absolute;
		content: '';
		width: 65px;
		height: 2px;
		background: #d82a87;
		top: 49%;
		left: 74%;
	}
	.wthree-social a {
		font-size: 15px;
		font-weight: 500;
		padding: 8px 4px;
		width: 55% !important;
		margin: 18px auto;
		text-align: center;
		text-decoration: none;
		letter-spacing: 1px;
		border: none;
		border-radius: 2em;
		background: #3b5998;
		color: #fff;
		outline: none;
		cursor: pointer;
		display: block;
		font-family: 'PT Sans', sans-serif;
		-webkit-transition: 0.5s all;
		-moz-transition: 0.5s all;
		-o-transition: 0.5s all;
		-ms-transition: 0.5s all;
		transition: 0.5s all;
	}
	.w3l-agree {
		text-align: center;
	}
	.w3l-agree p {
		font-size: 15px;
		font-weight: 500;
		text-align: center;
		display: inline-block;
		text-transform: capitalize;
		letter-spacing: 1px;
		color: #fff;
		font-family: 'PT Sans', sans-serif;
	}

	.tips {
		margin-bottom: 10px;
		padding: 10px;
		border: 1px solid #f5d8a7;
		border-radius: 2px;
		background: #fff6db;
		font-size: 12px;
		padding-left: 26px;
		>i {
			position: relative;
			&:after {
				position: absolute;
				display: inline-block;
				width: 17px;
				height: 17px;
				font-family: iconfont;
				font-style: normal;
				content: "\e64d";
				font-size: 28px;
				top: -9px;
				left: -24px;
			}
		}
	}

</style>

4
